<template>
	<view class="content">
		<view class="serchbox">
			<view class="mp-search-box">
				<image src="../../static/logo.png" style="width: 130upx;height: 26upx;align-items: center;"></image>
				<input class="ser-input" type="text" placeholder="输入关键字搜索" v-model="searchString" @change="search()" />
				<text @click="backpage()" style="font-size: 28upx;color: #fff;">取消</text>
			</view>
		</view>
		<view style="padding-top: 178upx;">
			<!-- 热门推荐 -->
			<view class="flex aic">
				<view v-for="(item,index) in choosearr" :key="index" class="flex aic flex-1 jc-center" style="font-size: 28upx;text-align: center;padding: 12upx 0;background-color: #fff;"
				 @click="eachchoose(index)">
					<text :class="index==chooseIndex?'topactive':''">{{item.name}}</text>
					<view style="margin-left:10upx;" v-if="item.timage==1||item.bimage==1">
						<image src="../../static/f-1.png" class="chooseicon topicon" v-show="item.order==1"></image>
						<!-- <view style="width:24upx;height: 2upx;background-color: #888;margin:4upx 0 4upx -6upx;"></view> -->
						<image src="../../static/f-1.png" class="chooseicon btmicon" style="margin-top: 6upx;" v-show="item.order==2"></image>
					</view>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view style="">
				<view v-if="goodslist.length<=0" class="empty">
					<image src="/static/empty.png" mode="widthFix"></image>
					<view class="empty-tips">
						暂无相关商品信息~
					</view>
				</view>
				<view style="padding: 20upx 30upx;display: flex;flex-wrap: wrap;" class="hot-goodbox">
					<view class="gooditem" v-for="(item,index) in goodslist" :key="index" @click="godetial(item.id,item.type,item)">
						<view>
							<image :src="item.images" style="height: 288upx;width:100%;border-radius: 20upx 20upx 0 0;"></image>
						</view>
						<view style="padding: 14upx;">
							<view class="goodtitle">{{item.title}}</view>
							<view style="color: #EC6104;font-size: 26upx;margin: 8upx 0;">{{item.price}}</view>
							<view style="color: #999;font-size: 22upx;text-decoration: line-through;">{{item.original_price}}</view>
						</view>
					</view>


				</view>
			</view>
		</view>

	</view>


</template>
<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				// 快递xinxi
				userToken: '',
				chooseIndex: 0,
				// 头部的筛选
				choosearr: [{
					'name': '综合',
					'timage': 0,
					'bimage': 0
				}, {
					'name': '销量',
					'timage': 1,
					'bimage': 1,
					'order': 0
				}, {
					'name': '价格',
					'timage': 1,
					'bimage': 1,
					'order': 0
				}],
				keywords: "",
				order_by: "",
				searchString:'',
				goodslist: {},
			}
		},
		onLoad(options) {

			let that = this
			that.userToken = uni.getStorageSync('token')
			//如果是搜索页进来的
			if (typeof options.keywords !== 'undefined') {
				that.keywords = options.keywords;
				that.getgoodslist();
			}
			console.log(that.keywords);

		},
		methods: {
			// 返回上一页面
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 去详情页
			// 跳转到详情页
			godetial(id,type,item) {
				console.log(item)
				if(type==2){
					uni.navigateTo({
						url: "buyteam",
						url:'../order/detail?type=quickbuy&id='+id+'&item='+JSON.stringify(item)
					})
				}else{
					uni.navigateTo({
						url: "../order/detail?id=" + id
					})
				}
				
			},
			eachchoose(ind) {
				let that = this;
				that.chooseIndex = ind
				that.choosearr[ind]['order'] = that.choosearr[ind]['order'] == 1 ? 2 : 1
				if (ind == 1) {

					that.order_by = that.choosearr[ind]['order'] == 1 ? "sales_count desc" : "sales_count asc";
				} else if (ind == 2) {
					that.order_by = that.choosearr[ind]['order'] == 1 ? "price desc" : "price asc";
				}
				that.getgoodslist();
			},

			// 搜索
			getgoodslist() {

				let that = this
				console.log(that.order_by);
				postAjax('Search/index', {
					keywords: that.keywords,
					order_by: that.order_by
				}, function(data) {
					console.log(data)
					if(data.code==0){
						that.goodslist = data.data.data
					}else{
						that.getgoodslist()
					}
					
				})
			},
			search() {

				let that = this
				that.keywords = that.searchString;

				that.getgoodslist();
			}

		}
	}
</script>

<style>
	.borderox {
		border-top: 2upx solid #eee
	}

	.content {
		min-height: 100vh;
		position: relative;
		background-color: #f5f5f5;
	}

	.serchbox {
		background-color: #1D84E8;
		;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
		position: fixed;
	}

	.mp-search-box {
		display: flex;
		align-items: center;
		padding: 90upx 40upx 16upx 24upx;
	}

	.ser-input {
		flex: 1;
		margin: 0 36upx 0 28upx;
		background-color: #fff;
		font-size: 28upx;
		padding: 16upx 20upx;
		border-radius: 20vw;
	}

	.titlebox {
		position: relative;
		font-size: 28upx;
		color: #333;
		padding-left: 22upx;
	}

	.titlebox::before {
		content: '';
		display: block;
		background-color: #1D84E8;
		width: 8upx;
		height: 30upx;
		position: absolute;
		left: 0;
		top: 6upx
	}

	.flex-1 {
		flex: 1
	}

	.gooditem {
		background-color: #fff;
		color: #fff;
		font-size: 28upx;
		border-radius: 20upx;
		width: 48%;
		margin-bottom: 20upx;
	}

	.hot-goodbox>.gooditem:nth-child(2n+2) {
		margin-left: 4%;
	}

	.goodtitle {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
	}

	.keyitem {
		display: inline-block;
		padding: 16upx 24upx;
		color: #666;
		font-size: 24upx;
		border-radius: 6upx;
		border: 2upx solid #C1C3C5;
		margin: 0 18upx 14upx;
		max-width: 250upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.options {
		font-size: 26upx;
		line-height: 30upx;
		width: 30%;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx;
		display: block;
	}

	.topactive {
		color: #EC6104;
	}

	.chooseicon {
		width: 12upx;
		height: 20upx;
		display: block;
	}

	.topicon {
		transform: rotate(-90deg);
	}

	.btmicon {
		transform: rotate(90deg);
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

	}

	.empty image {
		width: 240upx;
		margin-bottom: 30upx;
	}

	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;

	}
</style>
